<template>
  <div>
    <div
      class="header"
      style="height:600px;"
    >
      <div class="swiper">
        <img
          src="https://tests.winpow.com/vuestatic/img/home/banner.png"
          alt=""
        >
      </div>
      <div class="searchBox">
        <el-input
          placeholder="您需要什么服务"
          suffix-icon="el-icon-search"
          v-model="searchVal"
        >
        </el-input>

        <div class="hot_server">
          <div class="hot_word"> 热门服务：</div>
          <ul class="hot_word_others">
            <template>
              <li
                v-for="item in searchKeys"
                :key="item"
              >{{item}}</li>
            </template>
          </ul>

        </div>
      </div>
      <div class="headerBg">
        <div class="menuBox">
          <div class="logoBox"><img
              :src="imgUrl+'/vuestatic/img/home/logo.png'"
              alt="高新通"
            ></div>
          <ul class="menus">
            <template v-for="route,index in routes">
              <li
                :class="route.meta.action?'menuItem action':'menuItem'"
                :key="index"
              >
                <router-link :to="route.path">{{route.meta.title}}</router-link>
              </li>
            </template>
          </ul>
          <div
            class="signBox"
            v-show="showLoginBtn"
          >

            <div v-if="!loginStatusComputed">
              <button @click="boxType='login', tologinVisible = true,getLoginCode()">登录</button>
              <button @click="toSign(true)">注册</button>
            </div>
            <div v-else>
              <button>个人中心</button>
              <button @click="logoutFn">退出登录</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="tologinVisible"
      :modal="false"
      :close-on-click-modal="false"
      width="380px"
      :before-close="handleClose"
      class="login_fix"
    >
      <div
        class="login"
        style="display: inline-table"
      >
        <img
          src="https://tests.winpow.com/vuestatic/img/home/logo_b.png"
          alt=""
          class="logo_login"
        >
        <span
          @click="closeLoginBox"
          class="login_close"
          :style="'background-image:url(https://tests.winpow.com/vuestatic/img/home/close.png)'"
        ></span>

        <div v-if="boxType === 'login'">
          <p
            v-if="!isForgetPwd"
            class="login_c"
            style="margin-bottom: 10px;text-align: left"
          >
            <span
              :class="loginForm.source === 'policyknow'?'action':''"
              name="user_login"
              @click="setActionType('policyknow')"
            >账号密码登录</span>|
            <span
              :class="loginForm.source === 'winpow'?'action':''"
              name="code_d"
              @click="setActionType('winpow')"
            >盈创动力账户登录</span>
          </p>
          <p
            v-if="isForgetPwd"
            class="forgetPwdTitle"
            style="margin-bottom: 20px"
          >修改密码</p>
          <div class="user_login">
            <p class="input">
              <input
                type="text"
                name=""
                id="username_log"
                @keyup.enter="toLoginFn"
                v-model="loginForm.username"
                placeholder="手机号"
              >
            </p>
            <p class="input">
              <input
                type="password"
                id="password_log"
                @keyup.enter="toLoginFn"
                v-model="loginForm.password"
                :placeholder="isForgetPwd?'新密码':'密码'"
              >
            </p>
            <p
              v-if="isForgetPwd"
              class="input"
            >
              <input
                type="password"
                @keyup.enter="toLoginFn"
                v-model="loginForm.repassword"
                placeholder="确认密码"
              >
            </p>
            <div class="input_c">
              <input
                type="text"
                name=""
                id="gain_login_c"
                @keyup.enter="toLoginFn"
                v-model="loginForm.imgcode"
                placeholder="验证码"
              >
              <img
                v-if="!isForgetPwd"
                @click="getLoginCode"
                :src="loginCode"
                alt=""
                id="gain_login_img"
              >
              <div
                disabled="disabled"
                @click="isOpenSendMsgDialog"
                v-if="isForgetPwd"
                class="queryCode"
              >{{isSended?initTime:initTxt}}</div>
            </div>
            <div class="clear"></div>
            <p
              class="input_t"
              v-show="loginForm.source === 'winpow'"
            >注：首次用盈创动力账户登录后，系统会将账户在盈创动力科技金融服务平台上的数据同步到高新通平台</p>

            <button
              v-if="!isForgetPwd"
              @click="toLoginFn"
            >登录</button>
            <button
              v-if="isForgetPwd"
              @click="toSubChangePwd"
            >提交</button>
            <div class="third-part-login">
              <a
                class="tpl-w"
                href="https://open.weixin.qq.com/connect/qrconnect?appid=wx1bd002993661c8af&amp;redirect_uri=https://www.cdhtqyfw.cn/policyuser/weChat.html&amp;response_type=code&amp;scope=snsapi_login&amp;state=STATE#wechat_redirect"
              >

                <icon-svg name="wechat"></icon-svg>
                <span>微信登录</span>
              </a>
              <a
                href="https://oapi.dingtalk.com/connect/qrconnect?appid=dingoagmdu9ulrxozgxtue&amp;response_type=code&amp;scope=snsapi_login&amp;state=STATE&amp;redirect_uri=https://www.cdhtqyfw.cn/policyuser/getUserInfo.html">
                <icon-svg name="dingding"></icon-svg>
                <span>钉钉登录</span>
              </a>
            </div>
          </div>
          <!--<div class="code">
			<img src="" alt="" />
		</div>-->
          <p class="login_d">

            <a
              v-if="!isForgetPwd"
              @click="toFogetPwd"
              class="login_d_w"
            >忘记密码</a>
            <a
              v-if="!isForgetPwd"
              @click="toSign"
              class="lijizc"
            >立即注册</a>

            <a
              v-if="isForgetPwd"
              @click="toLoginBox"
              class="login_d_w"
              style="float:right"
            >返回登录</a>

          </p>
        </div>
        <div
          class="regBox"
          v-else-if="boxType === 'reg'"
        >
          <el-form
            :model="regForm"
            :rules="regFormRules"
            ref="regForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="姓名"
              prop="realname"
            >
              <el-input v-model="regForm.realname"></el-input>
            </el-form-item>
            <el-form-item
              label="手机号"
              prop="phone"
            >
              <el-input v-model.number="regForm.phone"></el-input>
            </el-form-item>
            <el-form-item
              label="设置密码"
              prop="password"
            >
              <el-input
                type="password"
                :show-password="true"
                v-model="regForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="确认密码"
              prop="repassword"
            >
              <el-input
                type="password"
                :show-password="true"
                v-model="regForm.repassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <div class="regImgBox">
              <el-form-item
                label="验证码"
                class="regImgCode"
                prop="msgcode"
              >
                <el-input
                  type="text"
                  v-model="regForm.msgcode"
                ></el-input>
              </el-form-item>
              <div
                disabled="disabled"
                @click="isOpenSendMsgDialog"
                class="queryCode"
              >{{isSended?initTime:initTxt}}</div>
            </div>

            <el-form-item prop="statement">

              <el-checkbox
                v-model="regForm.statement"
                name="type"
              >已阅读并接受</el-checkbox><span
                @click="isShowStatement = true"
                style="color:#409EFF;cursor: pointer;"
              >平台使用协议</span>
            </el-form-item>

          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              class="regSubBtn"
              type="primary"
              @click="registerFn('regForm')"
            >立即注册</el-button>
            <p class="backForLogin">已有账号/<span @click="boxType='login',clearRegForm()">登录</span></p>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      class="msgCode"
      title="发送短信验证码图形验证"
      :show-close="false"
      :close-on-click-modal="false"
      :modal="false"
      :top="'34vh'"
      :visible.sync="isQueryPhoneMsg"
      width="20%"
    >
      <img
        @click="getLoginCode"
        :src="loginCode"
        alt=""
        class="msgCodeImg"
        id="gain_login_img"
      >

      <el-form
        :model="sendPhoneMsgForm"
        :rules="sendPhoneMsgFormRules"
        ref="sendPhoneMsgForm"
        label-width="100px"
        class="sendPhoneMsgForm"
      >
        <el-form-item
          prop="imgcode"
          label='验证码'
        >
          <el-input
            type="text"
            placeholder="验证码"
            v-model="sendPhoneMsgForm.imgcode"
          ></el-input>
        </el-form-item>
        <el-form-item class="cardLoginBtnBox">
          <!-- <el-button
                  type="primary"
                  @click="submitForm('cardLoginFormRules')"
                >提交</el-button> -->
          <button
            class="sendmsgCloseBtn"
            @click="isQueryPhoneMsg = false,sendPhoneMsgForm.imgcode =''"
          >关 闭</button>
          <button
            class="sendBtn"
            @click="submitForm('sendPhoneMsgForm')"
          >发 送</button>

        </el-form-item>
      </el-form>

    </el-dialog>

    <el-dialog
      class="statementBox"
      title="平台协议"
      :center="true"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="isShowStatement"
    >
      <div>
        <Statement></Statement>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="isShowStatement = false"
        >返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { myMixin } from '@/mixin/index.js'
import { validaterPhone } from '@validator/index.js'
import Statement from './statement.vue'
import { toLogin, getUerInfo, indexUser, logout, sendmsg, changePassword, register } from '@api/login.js'
export default {
  mixins: [myMixin],
  name: 'Sidebar',
  components: {
    Statement,
  },
  data () {
    var validaterePass = (rule, value, callback) => {
      if (value == '' || value == undefined || value == null) {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      isQueryPhoneMsg: false,
      isForgetPwd: false,
      searchVal: '',
      tologinVisible: false,
      showLoginBtn: false,
      loginCode: '',
      loginForm: {
        username: undefined,
        password: undefined,
        repassword: undefined,
        imgcode: undefined,
        source: 'policyknow',
      },
      loginStatus: false,
      sendPhoneMsgForm: {
        msgtype: '10001',
        imgcode: undefined,
        mobile: undefined
      },
      sendPhoneMsgFormRules: {
        imgcode: [
          { required: true, message: '清输入验证码', trigger: 'blur' }
        ]
      },
      initTime: 60,
      initTxt: '获取验证码',
      isSended: false,
      sendTimer: null,
      querySendMsgBtnLoading: false,
      boxType: 'login',
      regForm: {
        realname: undefined,
        phone: undefined,
        password: undefined,
        msgcode: undefined,
        statement: undefined,
      },
      regFormRules: {
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        phone: [
          { required: true, validator: validaterPhone, message: '请输入手机号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        repassword: [
          { required: true, validator: validaterePass, trigger: 'blur' },
        ],
        msgcode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        statement: [
          { required: true, message: '请阅读并勾选平台协议', trigger: 'blur' },
        ],
      },
      isShowStatement: false,
    }
  },
  computed: {
    routes () {
      return this.$router.options.routes
    },
    searchKeys () {
      return this.$store.state.searchkey
    },
    loginStatusComputed () {
      setTimeout(() => {
        this.showLoginBtn = true;
      }, 500)
      return this.$store.state.islogin;//这里返回vuex的state里的str数据
    },
  },
  watch: {
    loginStatus (val) {
      this.$store.commit('changeLoginStatus', val)
    }
  },

  methods: {
    querySendMsgBtnLoadingFn () {
      this.isSended = true
      this.sendTimer = setInterval(() => {
        if (this.initTime > 0) {
          this.initTime -= 1
        } else {
          this.initTxt = '重新发送'
          this.sendPhoneMsgForm.imgcode = ''
          this.isSended = false
        }
      }, 1000);
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sendmsg(this.sendPhoneMsgForm).then(res => {
            if (res && res.code == 100) {
              this.$message.success('提交成功，短信将稍后发送至您得手机')
              this.isQueryPhoneMsg = false;
              this.querySendMsgBtnLoadingFn()
            }
          })
          // sendmsg()
          //   this.isQueryPhoneMsg = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    isOpenSendMsgDialog () {
      if (this.isSended) {
        return false
      }
      if (this.loginForm.username || this.regForm.phone) {
        this.sendPhoneMsgForm.mobile = this.loginForm.username || this.regForm.phone
        this.isQueryPhoneMsg = true
        this.getLoginCode()
      } else {
        this.$message.error('请输入手机号')
      }
    },
    // 获取验证码
    getLoginCode () {
      this.loginCode = `${import.meta.env.VITE_BASEURL}/policycommon/ValidateImage.html?radom=` + Math.random()
    },
    sendPhoneMsgFn () {

    },
    toSubChangePwd () {
      if (!this.loginForm.username) {
        this.$message.error('请输入手机号')
        return
      }
      if (this.loginForm.password !== this.loginForm.repassword) {
        this.$message.error('请确认新密码与确认密码一致')
        return
      }
      if (!this.loginForm.imgcode) {
        this.$message.error('请输入验证码')
        return
      }
      this.loginForm.phone = this.loginForm.username
      this.loginForm.source = undefined;
      changePassword(this.loginForm).then(res => {
        if (res && res.code == 100) {
          this.$message.success('密码修改成功')
        }
      })
    },
    toLoginFn () {

      toLogin(this.loginForm).then(res => {
        if (res && res.code == 100) {
          this.$message.success('登录成功')
          this.tologinVisible = false;
          this.loginStatus = true;
          indexUser().then(res => {
            window.localStorage.setItem('acator', JSON.stringify(res.data))
          })
        } else {
          this.getLoginCode()
        }
      })
    },

    getLoginCode () {
      this.loginCode = `${import.meta.env.VITE_BASEURL}/policycommon/ValidateImage.html?radom=` + Math.random()
    },
    logoutFn () {
      logout().then(res => {
        if (res && res.code == 100) {
          this.$message.success('退出角色成功')
          this.$store.commit('changeLoginStatus', false)
        }
      })
    },
    handleClose () {

      this.clearLoginForm()
    },
    setActionType (name) {
      this.loginForm.source = name
    },
    closeLoginBox () {
      this.tologinVisible = false;
      this.loginForm.username = undefined;
      this.clearLoginForm()
    },
    clearLoginForm () {
      this.isForgetPwd = false
      this.loginForm.password = undefined
      this.loginForm.imgcode = undefined
      this.loginForm.repassword = undefined
      this.loginForm.source = 'policyknow'
    },
    clearRegForm () {
      this.regForm.realname = undefined;
      this.regForm.phone = undefined;
      this.regForm.password = undefined;
      this.regForm.repassword = undefined;
      this.regForm.msgcode = undefined;
      this.regForm.statement = false;
    },
    // 提交注册信息
    registerFn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register(this.regForm).then(res => {
            if (res && res.code == 100) {
              this.$message.success('注册成功')
              this.loginForm.username = JSON.parse(JSON.stringify(this.regForm.phone))
              this.loginForm.password = JSON.parse(JSON.stringify(this.regForm.password))
              this.boxType = 'login'
            }
          })
          // sendmsg()
          //   this.isQueryPhoneMsg = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    // 打开忘记密码模块
    toFogetPwd () {
      this.isForgetPwd = true
      this.loginForm.password = undefined
      this.loginForm.imgcode = undefined
      this.loginForm.source = 'policyknow'
    },

    // 打开登录模块
    toLoginBox () {
      this.isForgetPwd = false
      this.clearLoginForm()
    },
    // 打开注册模块
    toSign (t) {
      console.log(t)
      this.clearLoginForm()
      this.loginForm.username = undefined
      this.boxType = 'reg'
      t ? this.tologinVisible = true : '';
    },
  },

  created () {

  },
  mounted () {
    this.$EventBus.$on("register", () => {
      this.toSign(true)
    });
  },
  beforeDestroy () {
    clearInterval(this.sendTimer);
    this.sendTimer = null;
  }
}
</script>
<style lang="scss" scoped>
.menus::v-deep {
  list-style: none;
  display: flex;
  height: 80px;
  align-items: center;
}

.header {
  height: 600px;
  position: relative;
  margin: 0 auto;
  width: 1920px;
  .swiper {
    position: absolute;
    width: 100%;
    height: 600px;
    z-index: -1;
    img {
      height: 100%;
    }
  }

  .searchBox {
    width: 700px;
    height: 60px;
    position: absolute;
    bottom: 50px;
    left: calc(50% - 350px);

    ::v-deep .el-icon-search:before {
      color: #1466cf;
      font-weight: 600;
    }
    ::v-deep .el-input__inner {
      height: 60px;
      border-radius: 30px;
      border: 2px solid #1466cf;
    }

    ::v-deep .el-input__inner:active {
      border-color: #034192;
    }

    ::v-deep .el-input__icon {
      margin-right: 4px;
    }
  }
}

.logoBox {
  width: 400px;
  img {
    width: 100%;
  }
}

.menus {
  width: 730px;
  margin: 0 70px 0 100px;
}

.menuBox {
  display: flex;
  width: 1470px;
  align-items: center;
  margin: 0 auto;
  flex-wrap: nowrap;
}
.menuItem {
  width: 92px;
  color: white;
  font-weight: 550;
  text-align: center;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
  &:hover {
    background: rgba($color: #1466cf, $alpha: 0.5);
  }
  &:active {
    background: #084697;
  }

  a {
    text-decoration: none;
    color: white;
    display: block;
  }
}

.headerBg {
  width: 100%;
  background: rgba($color: #333333, $alpha: 0.3);
  position: fixed;
  z-index: 999;
}

.signBox {
  width: 170px;
  .hidden {
    display: none;
  }
  button {
    width: 80px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
  }
  button:nth-child(1) {
    margin-right: 10px;
    background: #0a4dc7;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    &:active {
      background: #043694;
    }
  }
  button:nth-child(2) {
    background: none;
    border: 2px solid #0a4dc7;
    border-radius: 5px;
    color: #0a4dc7;
    font-size: 16px;
    &:active {
      border-color: #043694;
      color: #043694;
    }
    &:hover {
      border-color: white;
      color: white;
    }
  }
}

.hot_server {
  margin-top: 10px;
  display: flex;
  .hot_word {
    color: #f4605c;
    display: inline-block;
    width: 100px;
    text-align: right;
    background: url(https://tests.winpow.com/vuestatic/img/home/fire.png);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 0;
  }

  .hot_word_others {
    list-style: none;
    display: flex;
    li {
      color: white;
      margin-left: 14px;
      cursor: pointer;
    }
  }
}

.router-link-exact-active {
  background: #1466cf;
}
.login_fix::v-deep {
  .el-dialog {
    background: none;
    border: none;
    box-shadow: none;
  }
}
.login_fix .login {
  width: 380px;
  /*height: 566px;*/
  position: fixed;
  z-index: 100000;
  padding: 46px;
  background-color: #ffffff;
  border-radius: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  box-shadow: 3px 2px 5px rgba($color: #000000, $alpha: 0.5);
}

.login_fix {
  .forgetPwdTitle {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
  }
}

.login_fix .login .logo_login {
  width: 332px;
  /*height     : 50px;*/
  margin-top: 10px;
  margin-bottom: 20px;
}

.login_fix .login .login_c {
  font-size: 14px;
  margin-bottom: 45px;
  text-align: center;
  margin-top: 30px;
}

.login_fix .login .login_c span {
  cursor: pointer;
}

.login_fix .login .login_c span:nth-child(1) {
  margin-right: 10px;
}

.login_fix .login .login_c span:nth-child(2) {
  margin: 0px 10px;
}

.login_fix .login .login_c span:nth-child(3) {
  margin-left: 22px;
}

.login_fix .login .login_c span.action {
  color: #0c54ab;
}

.login_fix .login .user_login .input {
  margin-bottom: 10px;
}

.login_fix .login .user_login .input input {
  width: 350px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  padding: 0px 14px;
}

.login_fix .login .user_login .input_c {
  //   margin-bottom: 20px;
}
.queryCode {
  margin-left: 242px;
  background: #0a4dc7;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  &:active {
    background: #043694;
  }
}

.login_fix .login .user_login .input_t {
  color: #828691;
  margin: 20px 0 0;
}

.login_fix .login .user_login .input_c input {
  width: 200px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  padding: 0px 14px;
  float: left;
}

.login_fix .login .user_login .input_c #gain_login_img {
  float: right;
  height: 34px;
  cursor: pointer;
}

.login_fix .login .user_login .input_c span {
  width: 90px;
  height: 34px;
  float: right;
  line-height: 34px;
  margin-left: 16px;
  background-color: #1466cf;
  color: #ffffff;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

.login_fix .login .user_login button:hover {
  background: #0448a0;
}

.login_fix .login .user_login button {
  margin-top: 20px;
  width: 380px;
  height: 40px;
  background-color: #1466cf;
  color: #ffffff;
  border: 0px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}

.login_fix .login .login_d {
  width: 350px;
  font-size: 14px;
  text-align: right;
  margin-top: 20px;
}

.login_fix .login .login_d a {
  cursor: pointer;
}

.login_fix .login .login_d a.login_d_w {
  float: left;
}

.login_fix .login .login_d a:nth-child(2) {
  color: #f4605c;
}

.login_fix .login .login_close {
  /*font-size: 18px;*/
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  background-repeat: no-repeat;
  display: block;
  width: 14px;
  height: 14px;
}

.login_fix .login .code {
  display: none;
}

.login_fix .login .code img {
  width: 200px;
  height: 200px;
  margin: 0px auto;
  display: block;
  margin-bottom: 10px;
}

.third-part-login .tpl-w {
  margin-right: 40px;
}

.login_fix {
  .third-part-login {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #363942;
      font-size: 14px;
    }
  }
  .icon-svg {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}

.clear {
  clear: both;
}

.msgCode ::v-deep {
  //   background: black;
  .el-dialog {
    box-shadow: 3px 3px 8px #404040;
  }
}

.msgCodeImg {
  width: 104px;
  height: 40px;
  margin: 0 101px 10px 101px;
  border-radius: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.sendPhoneMsgForm ::v-deep {
  .sendBtn {
    margin-right: 10px;
    background: #0a4dc7;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    width: 70px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
  }
  .sendmsgCloseBtn {
    background: none;
    border: 2px solid #0a4dc7;
    border-radius: 5px;
    color: #0a4dc7;
    font-size: 16px;
    width: 70px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
  }
  .el-form-item__content {
    display: flex;
  }
}

.regBox::v-deep {
  .regSubBtn {
    background-color: #0a4dc7;
    border-color: #0a4dc7;
    width: 100%;
    margin-top: 15px;
    &:active {
      background-color: #002975;
      border-color: #002975;
    }
  }
  .backForLogin {
    margin-top: 10px;
    font-size: 14px;
    text-align: right;
    span {
      color: #f4605c;
      cursor: pointer;
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }
  .el-input__inner {
    height: 34px;
    margin-top: 10px;
  }
  .el-form-item__label {
    margin-top: 10px;
  }
  .el-form-item__error {
    top: 83%;
  }
  .el-input__icon {
    line-height: 55px;
  }
  .regImgBox {
    display: flex;
    .regImgCode {
    }
    .queryCode {
      background: #0a4dc7;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      height: 33px;
      width: 125px;
      margin-top: 10px;
      line-height: 33px;
      margin-left: 25px;
    }
  }
  .el-checkbox__label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 0px;
  }
}

.statementBox::v-deep {
  .el-dialog__title {
    line-height: 24px;
    font-size: 14px;
    color: #303133;
    font-weight: 600;
  }
}
</style>
